<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>机器管理</title>
</head>
<body>
    <div class="wrapper">
    	<#include "../index/header.html">
   		<#include "../index/sidebar.html">
   		<div id="app" class="content">
   			 <div style="float:right;border:0px solid red;width:500px;"><el-button type="primary" @click="showDialogAddForm('add',null)">新增机器</el-button></div>
	     	 <el-table :data="tableData" style="width: 100%">
			    <el-table-column
			      label="内网IP"
			      width="280">
			      <template slot-scope="scope">
			        <i></i>
			        <span style="margin-left: 10px">{{ scope.row.intranetIp }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="外网IP"
			      width="280">
			      <template slot-scope="scope">
			        <i></i>
			        <span style="margin-left: 10px">{{ scope.row.extranetIp }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="CID Client地址"
			      width="280">
			      <template slot-scope="scope">
			        <i></i>
			        <span style="margin-left: 10px">{{ scope.row.clientUrl }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="部署目录"
			      width="280">
			      <template slot-scope="scope">
			        <i></i>
			        <span style="margin-left: 10px">{{ scope.row.publishCatalog }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="showDialogAddForm('edit',scope.row)">编辑</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			  
			  
			  <el-dialog :title="dialogTitle" :visible.sync="dialogAddFormVisible" center>
				  <el-form :model="addForm" :rules="addFormRules" ref="addForm">
				     <el-form-item label="内网IP" label-width="120px" prop="intranetIp">
					    <el-input v-model="addForm.intranetIp"></el-input>
					 </el-form-item>
					 <el-form-item label="外网IP" label-width="120px" prop="extranetIp">
					    <el-input v-model="addForm.extranetIp"></el-input>
					 </el-form-item>
					 <el-form-item label="CID Client地址" label-width="120px" prop="clientUrl">
					    <el-input v-model="addForm.clientUrl"></el-input>
					 </el-form-item>
					 <el-form-item label="部署目录" label-width="120px" prop="publishCatalog">
					    <el-input v-model="addForm.publishCatalog"></el-input>
					 </el-form-item>
					 <el-form-item label="所属环境" label-width="120px" prop="environment">
					    <el-select v-model="addForm.environment" placeholder="请选择">
						    <el-option
						      v-for="item in environmentList"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					 </el-form-item>
				  </el-form>
				  <div slot="footer" class="dialog-footer">
				    <el-button @click="dialogAddFormVisible = false">取 消</el-button>
				    <el-button type="primary" @click="saveMachine">确 定</el-button>
				  </div>
			  </el-dialog>
			  
	    </div>
	    
    </div>
<script>
  new Vue({
    el: '#app',
    data: function() {
    	return {
    		page: 1,
            tableData: [],
            dialogAddFormVisible: false,
            addForm: {
            	id: '',
            	intranetIp: '',
            	extranetIp: '',
            	clientUrl: '',
            	publishCatalog: '',
            	environment: ''
            },
            addFormRules: {
              intranetIp: [{ required: true, message: '请输入内网IP', trigger: 'blur' }],
              clientUrl: [{ required: true, message: '请输入CID Client地址', trigger: 'blur' }],
              publishCatalog: [{ required: true, message: '请输入发布目录', trigger: 'blur' }],
              environment: [{ required: true, message: '请选择所属环境', trigger: 'blur' }],
            },
            dialogTitle: "新增机器",
            handleDataUri: "/rest/machine/add",
            environmentList: [{
                value: '测试环境',
                label: '测试环境'
              },
              {
                  value: '线上测试环境',
                  label: '线上测试环境'
              },
              {
                  value: '线上环境',
                  label: '线上环境'
              }]
        }
    },
    mounted: function() {
    	this.queryMachineList();
    },
    methods:{
    	queryMachineList: function() {
    		var that = this;
    		axios.get('/rest/machine/list', {
    		    params: {
    		      page: that.page
    		    }
    		})
   		    .then(function (response) {
   		    	if (response.data.code == 200) {
   		    		that.tableData = response.data.data.list;
   		    	} else {
   		    		that.$message.error(response.data.message);
   		    	}
   		    })
   		    .catch(function (error) {
   		    	if (error.response) {
   		     	    that.$message.error(error.response.data.error);
   		        } else {
   		        	that.$message.error("网络异常");
   		        }
   		    });
    	},
    	showDialogAddForm: function(type, data) {
    		if (type == 'add') {
    			this.dialogAddFormVisible = true;
    			this.addForm = {};
    			this.dialogTitle = "新增机器";
    			this.handleDataUri = "/rest/machine/add";
    		} else {
    			this.dialogAddFormVisible = true;
    			this.addForm = data;
        		this.dialogTitle = "编辑机器";
        		this.handleDataUri = "/rest/machine/edit";
    		}
    	},
    	saveMachine: function() {
    		var that = this;
    		that.$refs['addForm'].validate((valid) => {
   	           if (valid) {
   	        	  axios.post(that.handleDataUri, that.addForm)
   	        	  .then(function (response) {
   	        	    if (response.data.code == 200) {
   	        	    	that.$message({
   	        	          message: '操作成功',
   	        	          type: 'success'
   	        	        });
   	        	    	that.dialogAddFormVisible = false;
   	        	    	that.queryMachineList();
   	        	    }
   	        	  })
   	        	  .catch(function (error) {
   	        	    console.log(error);
   	        	  });
   	           } else {
   	             return false;
   	           }
    	    });
    	}
    }
  })
</script>
</body>
</html>

